<template>
 <div class="login-wrap">
  <div class="video-bg">
   <!-- <video muted="" data-autoplay="" loop="" autoplay="" src="https://gss3.baidu.com/6LZ0ej3k1Qd3ote6lo7D0j9wehsv/tieba-movideo/65886292_9687ec67dfc37bfbf847d82b6b52a276_96e56b0f4bfc.mp4" class="video-tvc" id="video-tvc" data-object-fit="">
   </video> -->
  </div>
  <div class="ms-title">{{title}}</div>
  <div class="ms-login">
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
    <el-form-item prop="username">
     <el-input v-model="ruleForm.username" placeholder="请输入账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
     <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
    </el-form-item>
    <el-form-item prop="verifyCode" class="verifyCodeItemCss">
     <el-input class="verify_css" placeholder="请输入4位验证码" v-model="ruleForm.verifyCode" @keyup.enter.native="submitForm('ruleForm')"></el-input>
     <div id="v_container"></div>
    </el-form-item>
    <div class="login-btn">
     <el-button class="loginBtn" type="primary" @click="submitForm('ruleForm')">登录</el-button>
    </div>
   </el-form>
  </div>
 </div>
</template>

<script>
import $ from '../plugins/jquery.js'
import { GVerify } from '../plugins/verifyCode.js'

export default {
 data: function () {
  return {
   title: '若晨后台管理系统',
   ruleForm: {
    username: '',
    password: '',
    verifyCode: ''
   },
   rules: {
    username: [
     { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    verifyCode: [
     { required: true, message: '请输入验证码', trigger: 'blur' }
    ]
   },
   verifyCode: null
  }
 },
 mounted () {
  // 随机播放帧数
  this.videoCut()

  this.verifyCode = new GVerify('v_container')
 },
 methods: {
  submitForm (formName) {
   var that = this

   // 获取验证码
   var verifyCode = this.ruleForm.verifyCode
   var verifyFlag = this.verifyCode.validate(verifyCode)
    if (!verifyFlag) {
        return this.$message.error('验证码输入错误')
      } else {
        this.$message.success('验证码正确')
      }

   this.$refs[formName].validate(valid => {
    if (valid) {
     // 判断是否登录成功

     let param = {
      userName: that.ruleForm.username,
      passWord: that.ruleForm.password
     }

     localStorage.setItem('ms_username', 'admin')
     localStorage.setItem('token', 'admin')
     that.$router.push('/index')
    } else {
     console.log('error submit!')
     return false
    }
   })
  },

  videoCut () {
   $('video').on('loadedmetadata', function (event) {
    var duration = Math.ceil(this.duration)
    this.currentTime = Math.round(Math.random() * duration)
   })
  }
 }
}
</script>


<style scoped>
.verify_css {
 width: 45%;
}

.login-wrap {
 position: relative;
 width: 100%;
 height: 100%;
}
.ms-title {
 position: absolute;
 top: 50%;
 width: 100%;
 margin-top: -230px;
 text-align: center;
 font-size: 30px;
 color: #fff;
}

.ms-login {
 position: absolute;
 left: 50%;
 top: 50%;
 width: 300px;
 height: 13rem;
 margin: -150px 0 0 -190px;
 padding: 40px;
 border-radius: 6%;
 background: #fff;
 box-shadow: -2px -2px 17px 1px #1e9fff;
}
.login-btn {
 text-align: center;
}
.login-btn button {
 width: 100%;
 height: 36px;
}
.video-bg {
 min-width: 100%;
 min-height: 100%;
 width: 100%;
 height: 100%;
 opacity: 0.9;
}
video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 /* opacity: 0.6; */
}

.loginBtn:hover {
 box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3),
  0px 0px 20px rgba(0, 0, 0, 0.1) inset;
}

#v_container {
 width: auto;
 height: auto;
 display: inline-flex;
 position: relative;
 top: 1rem;
 margin-top: -2rem;
}
</style>